@import "base"

.login_page
  display: flex
  flex-direction: column

  .title
    float: left
    padding: 20px
    font-size: $font_size *2
    width: 40px
    color: #70c1ec
    cursor: pointer
    z-index: 3

  .login_background
    position: absolute
    width: 100%
    height: 100vh
    background: url("img/game.jpg") no-repeat center center
    -webkit-background-size: cover
    /* 兼容Webkit内核浏览器如Chrome和Safari */
    z-index: -1

  .login_box
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    display: flex
    color: #03e9f4
    flex-direction: row
    align-items: center
    justify-content: center

    .Login_Title
      color: #ffffff
      font-size: 32px
      padding-right: 200px
      text-transform: uppercase
      font-weight: 200

    .Login_form
      padding: 20px
      background: rgba(58, 58, 58, 0.3)
      border: 1px solid #b6b6b6
      border-radius: 10%
      display: flex
      flex-direction: column
      align-items: center

    .form_title
      color: #7aabff
      margin-bottom: 10px
      font-size: calc($font_size * 1.2)
      border: 2px

    ul li
      margin-top: calc($font_size)

      input
        min-width: 400px
        margin-top: calc($font_size / 5)
        border-radius: 5px
        padding: calc($font_size / 2)
        box-sizing: border-box
        font-size: calc($font_size)
        font-weight: 400
        background: rgba(255, 255, 255, 0.7)

  .register_box
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    display: flex
    color: #03e9f4
    flex-direction: row
    align-items: center
    justify-content: center

    .Login_Title
      color: #ffffff
      font-size: 40px
      padding-right: 200px
      text-transform: uppercase
      font-weight: 200

    .Login_form
      padding: 30px
      position: relative
      background: rgba(58, 58, 58, 0.3)
      border: 1px solid #ffffff
      border-radius: 8%
      display: flex
      flex-direction: column
      align-items: center

    .form_title
      color: #9dbff8
      margin-bottom: 10px
      font-size: calc($font_size)
      border: 2px

    ul li
      margin-top: calc($font_size / 1.2)

      input
        min-width: 400px
        margin-top: calc($font_size / 5)
        border-radius: 5px
        padding: calc($font_size / 2)
        box-sizing: border-box
        font-size: calc($font_size)
        font-weight: 400
        background: rgba(255, 255, 255, 0.7)


.remember_me
  padding: 10px
  text-align: left
  display: flex
  flex-direction: row
  align-items: center
  margin-right: auto

  div
    margin-left: 5px

.loginButton
  background: linear-gradient(90deg, #06BFFF 0%, #2D73FF 100%)
  border-radius: 3px
  padding: 8px
  margin-top: 10%
  color: #fff
  font-size: 18px
  font-weight: 500
  font-family: inherit
  letter-spacing: .03em
  cursor: pointer
  min-width: 200px

  &:hover
    background: linear-gradient(90deg, #85dfff 0%, #6d96fa 100%)
    cursor: hand

  &:active
    background: linear-gradient(90deg, #85dfff 0%, #be6aad 100%)


.emailButton
  position: absolute
  background: linear-gradient(90deg, #25b5ee 0%, #8aeeee 100%)
  border-radius: 10%
  color: #6e6e6e
  font-size: 15px
  min-width: 100px
  margin: 305px 0 0 285px
  padding: 8px

  &:hover
    background: linear-gradient(90deg, #3493b9 0%, #ffffff 100%)

  &:active
    background: linear-gradient(90deg, #ffffff 0%, #3493b9 100%)

.changeToRegister
  position: absolute
  width: 10%
  bottom: 50px
  height: 20px
  background: linear-gradient(90deg, #25b5ee 0%, #8aeeee 100%)
  cursor: pointer
  text-align: center
  margin-left: 20px


.desss
  position: absolute
  bottom: 0
  margin-bottom: 20px
  width: 100%
  color: #a9a9a9
